// 使用 fetch 获取 task.json 数据
fetch("task.json")
  .then((res) => res.json()) // 将响应转换为 JSON 格式
  .then((data) => {
    // ====== 专辑 playlist ======
    const playlist = data.playlist || []; // 获取 playlist 数组，如果不存在则用空数组
    const playlistContainer = document.querySelector(".playlist"); // 获取存放专辑列表的容器
    const albumTemplate = document.querySelector("#album-template"); // 获取专辑模板节点

    playlistContainer.innerHTML = ""; // 清空容器中原有的内容

    // 遍历 playlist 数组，生成每个专辑元素
    playlist.forEach((item) => {
      const clone = albumTemplate.cloneNode(true); // 克隆模板节点（深拷贝）
      clone.removeAttribute("id"); // 移除克隆节点的 id，避免重复

      // 设置专辑封面图片
      clone.querySelector(".cover-img").src = item.cover;

      // 设置专辑标题
      clone.querySelector(".album-title").textContent = item.title;

      // 设置专辑作者，如果 item.author 不存在，则使用 item.singer
      clone.querySelector(".album-author").textContent =
        item.author || item.singer;

      // === 播放量格式化 ===
      const num = item.listen_num || 0; // 获取播放量，如果不存在则默认 0
      let displayNum = ""; // 用于存放格式化后的显示文本

      if (num >= 10000) {
        // 大于等于 1 万
        // 将数字除以 10000，保留 1 位小数，如果是整数去掉小数点
        displayNum =
          "播放量：" + (num / 10000).toFixed(1).replace(/\.0$/, "") + "万";
      } else {
        // 小于 1 万，直接显示原始数字，并使用千位分隔符
        displayNum = "播放量：" + num.toLocaleString() + "次";
      }

      // 设置播放量文本
      clone.querySelector(".album-time").textContent = displayNum;

      // 将生成的专辑节点添加到容器中
      playlistContainer.appendChild(clone);
    });

    // ====== 歌曲 songlist ======
    const songlist = data.songlist || [];
    const songlistContainer = document.querySelector(".songlist");
    const songTemplate = document.querySelector("#song-template");

    songlistContainer.innerHTML = ""; // 清空旧内容

    songlist.forEach((item) => {
      const clone = songTemplate.cloneNode(true);
      clone.removeAttribute("id");

      clone.querySelector(".song-img").src = item.cover;
      clone.querySelector(".song-title").textContent = item.name;
      clone.querySelector(".song-author").textContent = item.singer;

      // === 时间处理：将秒转换为 mm:ss 格式 ===
      const sec = parseInt(item.interval);
      if (!isNaN(sec)) {
        const min = Math.floor(sec / 60);
        const s = sec % 60;
        clone.querySelector(".song-time").textContent = `${min
          .toString()
          .padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
      } else {
        clone.querySelector(".song-time").textContent = "--";
      }
      songlistContainer.appendChild(clone);
    });
    // -------------------------------------------------------------------------------------
    // ====== MV 列表 mvlist ======
    const mvlist = data.mvlist || [];
    const mvlistContainer = document.querySelector(".mvlist");
    const mvTemplate = document.querySelector("#mv-template");

    mvlistContainer.innerHTML = ""; // 清空旧内容

    mvlist
      .forEach((item) => {
        const clone = mvTemplate.cloneNode(true);
        clone.removeAttribute("id");

        clone.querySelector(".mv-img").src = item.cover;
        clone.querySelector(".mv-title").textContent = item.title;
        clone.querySelector(".mv-author").textContent =
          item.author || item.singer;

        // === 播放量格式化 ===
        const num = item.listen_num || 0;
        let displayNum = "";

        if (num >= 10000) {
          // 大于 1 万，显示为“xx.x万播放”
          displayNum =
            '<img src="imgs/icon_listen.png" style="width:16px;height:10px;vertical-align:middle;"> ' +
            (num / 10000).toFixed(1).replace(/\.0$/, "") +
            "万";
        } else {
          // 小于 1 万，显示原始数值，并加图标
          displayNum =
            '<img src="imgs/icon_listen.png" style="width:16px;height:10px;vertical-align:middle;"> ' +
            num.toLocaleString() +
            "次";
        }

        // 用 innerHTML 而不是 textContent
        clone.querySelector(".album-time").innerHTML = displayNum;

        mvlistContainer.appendChild(clone);
      })
      .catch((err) => {
        console.error("读取失败:", err);
        document.querySelector(".playlist").innerHTML =
          "<div style='padding:20px;color:#999'>无法加载数据，请检查 task.json 路径。</div>";
      });
  });
